/**
 * HOC是什么？
 * High Order Component - 高阶组件

- HOC不是React提供的API，而是一种高级的设计模式
- HOC是一个函数接收一个组件参数，返回一个新组件
- 普通组件返回的是UI，而HOC返回的是一个新组件
- HOC不能修改参数组件，只能传入组件所需要的`props`
- HOC是一个没有副作用的纯函数
- HOC除了必须填入被包裹的组件参数以外，其余参数根据需求增加
- HOC不关心数据如何使用，包裹组件不关心数据从哪里来
- HOC和包裹组件直接唯一的契合点就是`props`
 */

//包装组件函数
//其实也算是一个类组件-根据传入props的field属性来返回不同的数据和事件处理方法还有视图的组件
function listHoc(WrapperComponent, fetchListData) {
  return class extends React.Component {
    state = {
      listData: []
    };

    //请求后端数据
    async componentDidMount() {
      const result = await fetchListData(this.props.field);

      //将后端数据缓存到state里
      this.setState({
        listData: result.data
      });
    }

    //方法
    removeStudent(id) {
      this.setState({
        listData: this.state.listData.filter((item) => item.id !== id)
      });
    }

    likeTeacher(id) {
      this.setState({
        listData: this.state.listData.map((item) => {
          if (item.id === id) {
            item.like += 1;
          }
          return item;
        })
      });
    }

    render() {
      //给子组件绑定视图需要的属性和方法
      return (
        <>
          {this.props.field === 'student' ? (
            <WrapperComponent
              data={this.state.listData}
              removeStudent={this.removeStudent.bind(this)}
            ></WrapperComponent>
          ) : (
            <WrapperComponent
              data={this.state.listData}
              likeTeacher={this.likeTeacher.bind(this)}
            ></WrapperComponent>
          )}
        </>
      );
    }
  };
}

export default listHoc;
